<!--  线 + 柱混合图 -->
<template>
    <div :id="id" class="VEchart" :style="{ height: styleOptions.height, width: styleOptions.width }"></div>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    id: {
        type: String,
        default: 'barchart'
    },
    styleOptions: {
        type: Object as any,
        default: () => ({
            width: '200px',
            height: '200px',
        })
    },
    baseOptions: {
        type: Object as any,
        default: () => ({})
    }

});
const { id } = props
const { baseOptions, styleOptions } = toRefs(props)
let chart: any = null

watch(
    () => baseOptions.value,
    (val: any) => {
        if (chart && val) {
            chart.setOption(val);
        }
    },
    {
        deep: true,
        immediate: true
    }
);

onMounted(() => {
    // 图表初始化
    chart = echarts.init(
        document.getElementById(id) as HTMLDivElement
    );

    chart.setOption(baseOptions.value);
    // 大小自适应
    window.addEventListener('resize', () => {
        chart.resize();
    });
});
</script>

<style lang="scss" scoped>
.VEchart {}
</style>
  